<template style="overflow-y: scroll; overflow-x: hidden; height: 100%">
  <el-drawer
    :title="this.label + '表格'"
    size="37%"
    :visible.sync="dialog"
    custom-class="demo-drawer"
    :before-close="handleClose"
  >
    <div class="demo-drawer__content">
      <el-form
        :rules="rules"
        :model="form"
        label-width="80px"
        class="demo-dynamic"
        ref="form"
      >
        <el-form-item label="模板文件"></el-form-item>
        <el-row>
          <!-- <el-col :span="3">选择部门</el-col> -->
          <el-form-item label="选择部门" v-if="this.sort != 2">
            <el-select
              @change="userGroupChange"
              v-model="userGroupId"
              placeholder="请选择部门"
            >
              <el-option
                v-for="item in userGroupOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <!-- <el-col :span="3">选择知识库</el-col> -->
          <el-form-item label="选择知识库" v-if="this.sort != 2">
            <el-select
              v-model="repositoryId"
              placeholder="请选择知识库"
              @change="repositoryChange"
            >
              <el-option
                v-for="item in repositoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <!-- <el-col :span="3">选择目录</el-col> -->
          <el-form-item label="选择目录" v-if="this.sort != 2">
            <el-cascader
              ref="cascadeFolder"
              :key="refresh"
              v-model="folderIds"
              :props="{ checkStrictly: true }"
              placeholder="请选择文档"
              :show-all-levels="false"
              :options="folderOptions"
              @change="folderChange"
            />
          </el-form-item>

          <!-- <el-col :span="3">选择文件</el-col> -->
          <el-form-item label="选择文件" v-if="this.sort != 2">
            <!-- <el-tag v-if="this.form.documentName && this.sort != 1">{{
              this.form.documentName
            }}</el-tag> -->
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :headers="{ Authorization: this.$store.getters.token }"
              :data="{
                repositoryId: this.repositoryId,
                folderId: this.folderId == '' ? 0 : this.folderId
              }"
              :limit="1"
              :file-list="fileList"
              :on-success="uploadSuccess"
              :multiple="false"
            >
              <span class="el-icon-circle-plus-outline button-icon"></span>
            </el-upload>
          </el-form-item>
        </el-row>

        <el-form-item label="名称" prop="documentName">
          <el-input type="text" v-model="form.documentName"></el-input>
        </el-form-item>
        <el-form-item label="版本" prop="version">
          <el-input type="text" v-model="form.version"></el-input>
        </el-form-item>
        <el-form-item prop="userGroupIdList" label="接收部门">
          <el-select
            v-model="form.userGroupIdList"
            :multiple="true"
            placeholder="请选择部门"
          >
            <el-option
              v-for="(item, index) in userGroupOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div class="demo-drawer__footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleClose"> 确 定 </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { listUserGroupAll } from '@/api/uc/userGroup'
import { list } from '@/api/fd/repository'
import { listTreeFolderOnlyFolder } from '@/api/fd/folder'
import { save, getPreview, pushModification } from '@/api/rs/record_template'

export default {
  props: ['dialogVisible'],

  data() {
    var checkUserGroupIdList = (rule, value, callback) => {
      if (this.form.userGroupIdList.length == 0) {
        callback(new Error('接收部门不可为空'))
      }
      callback()
    }
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + '/api/fd/document/upload',
      label: '',
      dialog: false,
      loading: false,
      form: {
        documentId: '',
        documentName: '',
        version: '',
        userGroupIdList: []
      },
      formLabelWidth: '80px',
      rules: {
        userGroupIdList: [
          { required: true, validator: checkUserGroupIdList, trigger: 'change' }
        ],
        version: [
          { required: true, message: '文件版本不可为空', trigger: 'change' }
        ],
        documentName: [
          { required: true, message: '文件名称不可为空', trigger: 'change' }
        ]
      },
      refresh: 0,
      userGroupId: '',
      userGroupOptions: [],
      repositoryId: '',
      repositoryOptions: [],
      folderIds: '',
      folderId: '',
      folderOptions: [],
      fileList: [],
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 5
      },
      recordTemplateId: '',
      sort: 1,
      SelectTheFileData: {}
    }
  },
  watch: {
    folderOptions: function () {
      ++this.refresh
    },
    dialogVisible(val) {
      this.label = val.label
      console.log(val, 'val')
      this.dialog = val.dialogVisible
      this.label = val.label
      this.sort = val.sort
      if (val.sort == 2) {
        this.recordTemplateId = val.recordTemplateId
        this.getForm()
      }
    }
  },
  mounted() {
    this.getUserGroup()
  },
  methods: {
    uploadSuccess(response, file, fileList) {
      //上传成功
      // this.form.documentName = ''
      this.form.documentId = response.data.documentId
      this.form.documentName = response.data.documentName
    },
    // },
    folderChange(val) {
      if (this.folderIds.length != 0) {
        this.folderId = this.folderIds[this.folderIds.length - 1]
        console.log(this.folderIds, 'this.folderId')
      }
    },
    repositoryChange(val) {
      //知识库改变时触发
      this.folderOptions = []
      this.folderId = ''
      this.folderIds = []
      this.folderOptions = []
      // this.temp.documentName = null
      listTreeFolderOnlyFolder({ repositoryId: val }).then((res) => {
        // console.log(res, 'resss')
        if (res.data.data) {
          this.folderOptions = res.data.data
        }
      })
    },
    userGroupChange(val) {
      //修改部门触发
      this.repositoryOptions = []
      this.repositoryId = ''
      // this.options = []
      var data = {
        belongTo: val,
        belongType: 1
      }
      list(data).then((res) => {
        res.data.forEach((item) => {
          var data = {
            value: item.repositoryId,
            label: item.repositoryName
          }
          this.repositoryOptions.push(data)
        })
      })
    },
    getUserGroup() {
      // 获取部门
      listUserGroupAll({ type: 0 }).then((res) => {
        //  this.userGroupOptions=res.data
        res.data.forEach((item) => {
          if (item.type == 1) {
            var data = {
              value: item.userGroupId,
              label: item.userGroupName
            }
            this.userGroupOptions.push(data)
          }
          if (item.type == 2) {
            var data = {
              value: item.userGroupId,
              label: item.userGroupName
            }
            this.userGroupOptions.push(data)
          }
        })
      })
    },
    handleCancel() {
      this.dialog = false
    },
    handleClose() {
      if (this.sort == 2) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let data = {
              documentId: this.form.documentId,
              documentName: this.form.documentName,
              version: this.form.version,
              userGroupIdList:  this.form.userGroupIdList,
             recordTemplateId:this.recordTemplateId
            }
            pushModification(data).then((res) => {
               this.$message.success('修改成功')
                this.dialog = false
            })
          }
        })
        //  let nodesObj = this.$refs['cascader'].getCheckedNodes()
        //  console.log(nodesObj,'ppp');
      } else if (this.sort == 1) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            save(this.form).then((res) => {
              this.$message.success('保存成功')
              this.$refs.form.resetFields()
              this.userGroupId = ''
              this.userGroupOptions = []
              this.repositoryId = ''
              this.repositoryOptions = []
              this.folderIds = ''
              this.folderId = ''
              this.folderOptions = []
              this.fileList = []
              this.dialog = false
              this.$emit('pageDataReload', true)
            })
          }
        })
      }
    },
    // 获取单个表格信息
    async getForm() {
      const data = await getPreview({ recordTemplateId: this.recordTemplateId })
      console.log(data, 'dataooo')
      this.form.documentName = data.data.documentName
      this.form.version = data.data.version
      // this.form.userGroupIdList =
      //   data.data.getRecordTemplateUserGroupResponseList
      this.form.documentId = data.data.documentId
      this.userGroupId = data.data.belongTo
      this.userGroupChange(this.userGroupId)
      this.repositoryId = data.data.getDocumentResponse.repositoryId
      this.repositoryChange(this.repositoryId)
      let id = data.data.getDocumentResponse.folderId
      this.folderIds.push(id)
      this.recordTemplateId=data.data.recordTemplateId
    }
  }
}
</script>

<style lang="scss">
:focus {
  outline: 0;
}
.el-drawer.rtl {
  overflow: scroll;
}
.el-form-item__content {
  display: flex;
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

  flex-wrap: wrap;
}
.demo-drawer__footer {
  text-align: right;
  margin-top: 50px;
  padding: 0 20px;
}
.el-form-item {
  margin-bottom: 20px !important ;
}
</style>>
